<template>
	<view>
		<!-- 正文 -->
		<view v-if="!networkStatus">
			<!-- <nonetword @onclick="getList"></nonetword> -->
		</view>
		<view v-if="networkStatus">
			<!-- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa"></tui-skeleton> -->
			<!-- <hx-navbar :config="navConfig"></hx-navbar> -->
			<view style="      padding: 20rpx;">
				注：支持绑定已注册的账号或测试号,可输入注册手机号或测试号进行绑定,绑定测试号无需验证码验证，绑定测试号下的订单将视为无效订单.
			</view>
			<view class="main-body-view" :style="{top:statusBarHeight}">
				<view class="group">
					<view class="title">注册的联系电话</view>
					<input class="u-input" focus placeholder="请输入注册的联系电话" v-model="mobile"/>
				</view>
				<!-- 行 -->
				<view class="row">
					<view class="left-box">
						<view class="text">
							验证码
						</view>
						<view class="operation">
							<input type="text" value="" v-model="verification" placeholder="请输入验证码"/>
						</view>
					</view>
					
					<view class="right-box">
						<view class="text" v-if="countdown==0" @click="getVerCode()">
							获取验证码
						</view>
						<view class="textno" v-if="countdown==1">
							
							<tui-countdown :time="timeList" borderColor="#fff" :hours="false" :minutes="false" scale unitEn  :isColon="false" @end="endOfTime"></tui-countdown>
							<text>后可重试</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="foot-btn">
				<view class="btn" @click="applyFun">确定</view>
			</view>
			<!-- <view class="place-bottom"></view> -->
			<!-- <tui-modal :show="modal" @click="modalClick" @cancel="modalHide" content="确定清理缓存吗？" color="#333" :size="32" :button="modalButton" shape="circle"></tui-modal> -->
			<!-- 弹框 -->
			<tui-tips ref="toast"></tui-tips>
			<!-- 登录弹框 -->
			<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom" />
		</view>
	</view>
</template>
<script>
	import tuiUpload from '@/components/tui-upload/tui-upload'
	// 推广名片
	// import _app from '@/js_sdk/QuShe-SharerPoster/util/QS-SharePoster/app.js';
	// import {
	// 	getSharePoster
	// } from '@/js_sdk/QuShe-SharerPoster/util/QS-SharePoster/QS-SharePoster.js';

	// import he from '@/utils/he.js'
	//公共底部组件引入
	// import btabbar from '@/components/bottomtabbar.vue'
	// 公共底部
	// import btabbar from '@/components/indexBottomTable/bottomtabbar.vue'
	// import tuiListCell from "@/components/list-cell/list-cell"
	// import nonetword from '@/components/nonetword.vue'

	// import tuiModal from "@/components/modal/modal"
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				statusBarHeight: '',
				imageData: [],
				serverUrl: '',
				isTop: 0,
				heightVal: '-112rpx',
				//网络状态
				networkStatus: true,
				skeletonShow: true,
				fixedTop: 140,
				navConfig: {
					
					backbtn:{
						color: '#000',
					},
					backTxt:'返回',
					backgroundImg: 'https://xoimg.aiouning.com/static/LH_user_img/nav.png',
					title: '申请入驻',
					color: '#fff',
					fontSize: 12,
					back: true,
					height: 175
				},
				mobile:'',
				countdown:0,
				verification:'',
				timeList:60,
				//接口数据
				data: {
					list:{
						// company_name:'',
						// mobile:'',
						// contact_name:'',
						// id_card:'',
						// email:'',
						// license_image:[],
						// id:''
					},
					//客服电话
					serviceMobile: '18677057271',
					//个人信息,
					userInfo: {
						nickname: '游客',
						face: '',
						signature: '点击昵称跳转登录/注册页',
						integral: 0,
						balance: 0,
						envelope: 0,
						exp: 0,
						upExp: 0,
						vipname: ''
					},

				},
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				// 推广名片
				hasLogin: false,
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',

				modal: false,
				//确认弹框
				modalButton: [{
					text: "取消",
					type: 'gray'
				}, {
					text: "确定"
				}],
				qrUrl: '',
				// 节点
				//生成二维码地址
				qrImgHost: '',
				OSS_HOST: 'https://xoimg.aiouning.com/static/',
				// OSS_HOST:'../../static/',

			}
		},
		components: {
			
			tuiUpload

		},
		computed: {
			...mapGetters(['netWorkType', 'loginStatus']),
			expup: function() {
				return parseInt(this.data.userInfo.exp / this.data.userInfo.upExp * 100)
			}
		},
		onPageScroll: function(e) {

			if (e.scrollTop > 100) {
				this.isTop = 1
			} else {
				this.isTop = 0
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onLoad(e) {
			let _this = this;
			
			
			this.GetStatusBarHeight();
			this.statusHeight = 0;
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			if (!this.loginStatus) {
				store.dispatch('changeLogin', false)
			}
			this.qrImgHost = this.$service.getQrImgHost()
			//获取满屏高度
			uni.getSystemInfo({
				success: function(res) {
					// _this.fixedTop = (res.screenHeight-568)+140
				}
			});

			this.serverUrl = this.$service.getImgHost()


		},
		onReady() {
			//此处，演示,每次页面初次渲染都把登录状态重置
			// uni.setStorage({
			// 	key: 'UserInfo',
			// 	data: false,
			// 	success: function () {
			// 	},
			// 	fail:function(e){
			// 	}
			// });
		},
		onShow: function() {
			// this.heightVal='-'+(140+44-uni.getSystemInfoSync().statusBarHeight)+ 'px';
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
			
		},
		filters: {
			iconFilters: function(x) {
				return he.decode(x);
			}
		},
		methods: {
			applyFun() {
				let _this = this;
				
				// uni.showLoading({
				// 	title: '加载中...',
				// 	mask: false
				// });
				// uni.showNavigationBarLoading(); //显示加载动画
				
				
				
				//提交ajax
				//console.log(1111)
				var opt = {
					url: '/User/businessBind',
					data: {
						mobile:_this.mobile,
						code:_this.verification||''
					},
					success: function(res) {
						if (res.status == 1) {
							
							uni.hideNavigationBarLoading(); //关闭加载动画
							uni.hideLoading()
							uni.showToast({
								icon:'none',
								title:'操作成功'
							})
							// _this.$refer.setVilit('/packageUser/pages/user/business_enter/list','reLaunch')
							uni.navigateBack({
								delta:2
							})
							
							
						} else {
							
							console.log(11111)
							uni.showToast({
								icon:'none',
								title:res.message,
								duration:3000,
								complete:function(){
									console.log(22222)
									// _this.loadingType = 2;
									// uni.hideNavigationBarLoading(); //关闭加载动画
									// uni.hideLoading()
								}
							})
						}
					}
				};
				
				_this.$service.GetApi(opt)
				
			},
			// 获取验证码按钮
			getVerCode(){
				// 使用验证码没见到倒计时
				//获取验证码
				const _this = this
				
				//正则用不了
				var r=/^[1][3,4,5,7,8,9][0-9]{9}$/;
								
				// if (!_this.mobile.match(r)) {
				//      uni.showToast({
				//         icon: 'none',
				// 		position: 'bottom',
				//         title: '手机号不正确'
				//     });
				//     return false;
				// }
				// console.log("获取验证码")
				
				var opt={
						url:'/sms/getBusinessVertify',
						data:{
								mobile:this.mobile,
								tpl_type:'user',
								option_type:'mb_bind_verify'
							},
						success:function(res){
										
							if(res.status==1){
								// _this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）		 
								//uni.setStorageSync('token',res.data.token);							
								uni.showToast({
										icon:'none',
										title:res.message,
										duration: 3000
								});
								_this.countdown=1													
							}else{
									console.log(res.message)
									uni.showToast({
										icon:'none',
										title:'手机号格式错误'
									});
							}
						}
				};
				
				_this.$service.GetApi(opt);
				
				
			},
			// 倒计时结束
			endOfTime: function() {
				const _this = this
				_this.countdown=0
				console.log("倒计时结束，事件执行")
			},
			GetStatusBarHeight() {
				let that = this;
				wx.getSystemInfo({
					success: function(res) {
						that.statusBarHeight = (res.statusBarHeight + 44 + 15) + 'px'; //这就是状态栏的高度
						console.log(that.statusBarHeight)
					},
				});
			},
			result: function(e) {
				console.log(e)
				
				this.imageData = e.imgNameArr;
				this.data.list.license_image=this.imageData;
				uni.setStorageSync('business_license', JSON.stringify(this.imageData));
			},
			remove: function(e) {
				//移除图片
				console.log(e)
				let index = e.index
			},
			navClick(url) {
				// console.log(url)


				let _this = this

				if (url == 'stop') {
					let options = {
						msg: '即将开放',
						type: 'danger'
					};
					_this.$refs.toast.showTips(options);
					return
				}

				this.$refer.setVilit(url)
				let callback = function(url) {

					_this.$refs.popupvLogin.open()
				}

				this.$refer.toUrl(callback)
			},
			// 刷新的方法
			refresh() {
				//this.getList();
			},
			// 跳转的方法
			swiperChange(active, url) {
				const _this = this
				uni.setStorageSync('commonBottomActive', active);
				// uni.redirectTo({
				// 		url: url
				// })
				_this.$refer.setVilit(url)
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				_this.$refer.toUrl(callback, '', 'redirectTo')
			}
			





		}
	}
</script>
<style lang="scss">
	@import "./bind.scss";
</style>
